import React, { PureComponent } from "react"
import { connect } from "react-redux"
import { TopContent } from "@/components/main/index/section/styled"
import { Carousel } from 'antd-mobile';

class TopArea extends PureComponent {
    render() {
        return this.props.indexTopData.slide_list ? (
            <div>
                <Carousel autoplay infinite>
                    {
                        this.props.indexTopData.slide_list.map((item, index) => (
                            <a
                                key={index}
                                href={item.url}
                                style={{ display: 'inline-block', width: '100%', height: '196px' }}
                            >
                                <img
                                    src={item.image_url}
                                    alt=""
                                    style={{ width: '100%', verticalAlign: 'top', height: '196px' }}
                                />
                            </a>
                        ))}
                </Carousel>
                <TopContent>
                    <div className="classify">
                        <ul>
                            {
                                this.props.indexTopData.classify_list.map((item, index) => (
                                    <li key={index}>
                                        <a href={item.url}>
                                            <img src={item.pic} alt="" />
                                            <p>{item.name}</p>
                                        </a>

                                    </li>
                                ))
                            }
                        </ul>
                    </div>
                    <div className="adv1">
                        <img src={this.props.indexTopData.ad_list.advert1[0].pic} alt="" />
                    </div>
                    <div>
                        <ul className="firstLine">
                            {
                                this.props.indexTopData.operation_list.slice(0, 2).map((item, index) => (
                                    <li key={index}>
                                        <div className="titleWord">
                                            <p>{item.name}</p>
                                            <div dangerouslySetInnerHTML={{ __html: item.describe }}></div>
                                        </div>
                                        <img src={item.pic } alt=""/>
                                    </li>
                                ))

                            }
                        </ul>
                        <ul className="secondLine">
                            {
                                this.props.indexTopData.operation_list.slice(2).map((item, index) => (
                                    <li key={index}>
                                        <div className="titleWord">
                                            <p>{item.name}</p>
                                            <div dangerouslySetInnerHTML={{ __html: item.describe }}></div>
                                        </div>
                                        <img src={item.pic } alt=""/>
                                    </li>
                                ))
                            }
                        </ul>
                    </div>
                </TopContent>
            </div>
        ) : (null)
    }
}

// immutaable数据

const mapStateToProps = (state) => {
    // console.log(state.getIn(["indexReducer", "indexTopData"]).toJS());

    return {
        currentCity: state.getIn(['indexReducer', 'currentCity']).toJS(),
        indexTopData: state.getIn(["indexReducer", "indexTopData"])

    }
}
const mapDispatchToProps = (dispatch) => ({

})
export default connect(mapStateToProps, mapDispatchToProps)(TopArea)


